<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/dawn.layout.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/icons-extra.css" rel="stylesheet"/>
	<!--App自定义的css-->
	<link href="css/app.css" rel="stylesheet"/>
	<link href="css/dawn.layout.css" rel="stylesheet"/>
	<style>
		.mui-content,.mui-control-content{
			height: 100%;
			background: white;
		}
		
	</style>    
    <script type="text/javascript" charset="utf-8">

		$(function(){
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			$("#home").DawnLayout({
				direction: 'vertical',
				isBorder: false,
		        panes: [
					{ id: 'recommend', size: '40%'},
					{ id: 'reward', size: '30%'},
					{ id: 'trends' }				 
		        ]
			});
			$("#recommend").DawnLayout({
				direction: 'horizontal',
				isBorder: false,
		        panes: [
					{ id: 'list', size: '50%'},
					{ id: 'balance', size: '50%' }				 
		        ]
			});			
		});
		
    </script>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#home">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="#post">
			<span class="mui-icon-extra mui-icon-extra-lamp"></span>
			<span class="mui-tab-label">职位</span>
		</a>
		<a class="mui-tab-item" href="#community">
			<span class="mui-icon-extra mui-icon-extra-hotel"></span>
			<span class="mui-tab-label">社区</span>
		</a>
		<a class="mui-tab-item" href="#message">
			<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="#mine">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<div class="mui-content">
		<div id="home" class="mui-control-content mui-active">
			
			<div id="recommend">
				<div id="list" style="padding-top: 20px; padding-left: 20px;">
					<h3 style="margin-bottom: 20px ;">工作推荐</h3>
					<ul class="mui-table-view">
						 <li>
							<div>
								上海AAA公司
								<p>总经理助理</p>
							</div>					 	
						 </li>
						 <li>
							<div>
								上海BBB公司
								<p>总裁助理</p>
							</div>					 	
						 </li>
						 <li>
							<div>
								上海CCC公司
								<p>副总经理</p>
							</div>					 	
						 </li>					 
					</ul>
				</div>
				<div id="balance">
					<div style="width: 100px;height: 100px;border: solid 1px #555555;border-radius: 50%;margin: 20px auto; line-height: 100px;text-align:center">288贯</div>
					<div style="width: 100px;height: 30px;border: solid 1px #555555;border-radius: 5px;margin: 0 auto; line-height: 30px;text-align:center"><span style="font-size: 12px;">推荐朋友加"贯"</span></div>
				</div>
			</div>
			<div id="reward" style="padding-top: 10px; padding-left: 20px;">
				<h3 style="margin-bottom: 20px ;">赏金猎人</h3>
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
			        <li class="mui-table-view-cell">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-5">
			                    <h4 class="mui-ellipsis">高级副总裁</h4>
			                    <p class="mui-h6 mui-ellipsis">上海XXX集团公司</p>
			                </div>
			                <div class="mui-table-cell mui-col-xs-4">
			                    <h4 class="mui-ellipsis" style="color: red;">年薪80万</h4>
			                </div>			                
			                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
			                    <span class="mui-h5">悬赏5000贯</span>
			                </div>
			            </div>
			        </li>
			        <li class="mui-table-view-cell">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-5">
			                    <h4 class="mui-ellipsis">财务总监</h4>
			                    <p class="mui-h6 mui-ellipsis">苏州XX公司</p>
			                </div>
			                <div class="mui-table-cell mui-col-xs-4">
			                    <h4 class="mui-ellipsis" style="color: red;">年薪40万</h4>
			                </div>			                
			                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
			                    <span class="mui-h5">悬赏3000贯</span>
			                </div>
			            </div>
			        </li>			        
				</ul>
			</div>
			<div id="trends" style="padding-top: 10px; padding-left: 20px;">
				<h3 style="margin-bottom: 20px ;">社区动态</h3>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<img class="mui-media-object mui-pull-left" src="img/canvas.jpg">
						<div class="mui-table-cell mui-col-xs-5">
							求职大临港
							<p class='mui-ellipsis'>浦东临港的工作机会多不多？</p>
						</div>
		                <div class="mui-table-cell mui-col-xs-4 mui-text-right">
		                    <span class="mui-icon mui-icon-chatbubble" style="font-size: 20px"><span class="mui-badge" style="line-height: 1">1763</span></span>
		                </div>						
					</li>					
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<img class="mui-media-object mui-pull-left" src="img/canvas.jpg">
						<div class="mui-table-cell mui-col-xs-5">
							园区论坛
							<p class='mui-ellipsis'>临港大开发，外地员工可以....</p>
						</div>
		                <div class="mui-table-cell mui-col-xs-4 mui-text-right">
		                    <span class="mui-icon mui-icon-chatbubble" style="font-size: 20px"><span class="mui-badge" style="line-height: 1">230</span></span>
		                </div>						
					</li>					
				</ul>				
			</div>
            
		</div>
		<div id="post" class="mui-control-content">
			<div class="title">职位</div>
			
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a></li>
				<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a></li>
			</ul>
			
		</div>
		<div id="community" class="mui-control-content">
			<div class="title">社区</div>
		</div>
		<div id="message" class="mui-control-content">
			<div class="title">消息</div>
		</div>
		<div id="mine" class="mui-control-content">
			<div class="title">我的</div>
		</div>		
	</div>
</body>
</html>